<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{
            width: 400px;
            height: 400px;
            border: 1px solid blueviolet;
            margin-left: 60px;
        } */
        .a {
            /* position: relative; */
            position: absolute;
            /* position: fixed; */
            width: 200px;
            height: 200px;
            border: 1px solid red;
            left: 30px;
            /* margin-left: 30px; */
        }

        .b {
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            /* left: 300px; */
            margin-left: 100px;
            /* position: absolute; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="b">
            <div class="a"></div>
        </div>
    </div>
    <script>
        // 1.C

        // 2.ABCD

        // 3.B

        // 4.ABC

        // 5.ABCD

        // 12.BCD
        // (1)无法判断
        console.log(typeof (["a", "b"])) //object
        // (2)可以
        var arr = [1, 2, 3]
        console.log(arr instanceof Array) //true
        // (3)可以
        var arr = [1, 2, 3]
        console.log(arr.constructor === Array) //true
        // (4)可以
        var arr = [1, 2, 3]
        console.log(Object.prototype.toString.call(arr) === '[object Array]') //true

        var obj = {
            a: 1
        }
        console.log(obj instanceof Object) //true
        console.log(obj.constructor === Object) //true
        console.log(Object.prototype.toString.call(obj) === '[object Object]') //true
    </script>


    <!-- 13.ACD -->
    <div class="box">
        <button id="box" name="file">按钮</button>
    </div>
    <script>
        var button = document.querySelectorAll('box')[0]
        console.log(button)
        button.style.color = "30px"

        // var button = document.getElementById('box')
        // button.style.color = "red"

        // var button = document.getElementsByTagName('box')[0]
        // var button = document.getElementsByClassName('box')
        // button.style.color = "red"
    </script>

    <script>
        // 14.
        var person = "Bob";
        (function () {
            if (typeof person === "undefined") {
                console.log(typeof person) //undefined
                var person = "Jack"
                console.log("Goodbye" + person)
            } else {
                console.log("Hello" + person)
            }
        })()

        // 结果GoodbyeJack

        // 首先因为我下面的括号没有传值,所以我函数内部没有收到值,
        // 所以我if语句里面的typeof person 就是undefined，所以进去了，得到结果GoodbyeJack
    </script>

    <script>
        // 15
        function func(value) {
            switch (value) {
                case 'A':
                    console.log("Case A");
                    break;
                case 'B':
                    console.log("Case B");
                    break;
                case 'undefined':
                    console.log("Case undefined");
                    break;
                default:
                    console.log("Do not know")
            }
        }

        // func(String("A")),String("A")生成的是一个字符串对象，结果Case A
        // func(new String("A"))，生成的是字符串对象，结果是Do not know
        // func("undefined")
        var a = new String("A")
        console.log(a)


        // 16.BCD

        // 17.B
        // (1)key的作用主要是是为了高效的更新虚拟DOM
        // (2)render函数较template优先级别高,el与tamplate存在竞争关系，render函数一定会执行
        // 优先级顺序：el < template < render,
        // 只有el可以，只有template和只有render不行，既有el又有template可以，会用template中的内容
        // 既有el,template,render，会使用render的内容
        // (3)使用vm.$nextTick可以确保获得DOM异步更新的结果
        // (4)若没有el选项，vm.$mount(dom)可以将Vue实例挂载于指定元素上


        // 18.C
        // .v-model是可以使用在自定义组件上的， 子组件在props中通过value接收数据，
        // 通过$emit('input')去派发事件

        // 19.D
        // beforeUpdate,uodated 只有数据更新时候才会触发

        // 20.C
        // beforeEnter是对单个路由的守卫，不是单个组件

    </script>

</body>

</html>